<template>
  <div class="i_bg bg_color">

    <!--Begin 用户中心 Begin -->
    <div class="m_content">
      <UserCenterNav :user-type="userType" />
      <div class="m_right">
        <!-- 子路由视图 -->
        <router-view 
          :user-info="userInfo"
          :order-reminders="orderReminders"
          :user-center-notice="userCenterNotice"
          @send-verification-email="sendVerificationEmail"
        />
      </div>
    </div>
    <!--End 用户中心 End--> 
  </div>
</template>

<script>
import MemberSearch from '@/components/common/MemberSearch.vue'
import UserCenterNav from '@/components/user/UserCenterNav.vue'

export default {
  name: 'UserCenter',
  components: {
    MemberSearch,
    UserCenterNav
  },
  data() {
    return {
      userCenterNotice: '用户中心公告！',
      userInfo: {
        id: '12345678',
        username: 'TRACY',
        level: '注册用户',
        pointsToNextLevel: 270,
        nextLevel: '分红100',
        lastLoginTime: '2015-09-28 18:19:47',
        isEmailVerified: false,
        totalSpent: '200',
        points: '99',
        balance: '200',
        redPackets: '3',
        redPacketsValue: '50',
        idCardMasked: '522124***********8',
        phoneMasked: '186****1234',
        emailMasked: '*******789@qq.com',
        registerTime: '2015/10/10',
        completedOrders: '0',
        inviter: '邀请人',
        loginCount: '3'
      },
      userType: 0, // 用户类型，默认为普通用户
      orderReminders: {
        unpaid: 0,
        undelivered: 2,
        uncommented: 1
      },
      isLoggedIn: true // 默认已登录
    }
  },
  methods: {
    sendVerificationEmail() {
      if (!this.userInfo || !this.userInfo.username) {
        return
      }
      // 发送验证邮件的逻辑
      this.$message.success('验证邮件已发送，请查收！')
    },
    fetchUserData() {
      // 确保数据初始化
      this.userInfo = this.userInfo || {}
      this.orderReminders = this.orderReminders || {}
      
      // 从localStorage获取用户类型
      const userInfo = localStorage.getItem('userInfo')
      if (userInfo) {
        try {
          const user = JSON.parse(userInfo)
          this.userType = user.userType || 0
        } catch (e) {
          console.error('解析用户信息失败:', e)
        }
      }
      
      // 这里可以添加从后端获取用户数据的逻辑
      // 例如使用axios请求用户信息
      // axios.get('/api/user/info').then(response => {
      //   this.userInfo = response.data || {}
      // }).catch(() => {
      //   this.userInfo = {}
      // })
    }
  },
  created() {
    this.fetchUserData()
  },
  beforeUnmount() {
    // 清理可能的引用，避免内存泄漏
    this.userInfo = null
    this.orderReminders = null
  }
}
</script>

<style scoped>
/* 用户中心样式 */
.m_content {
  display: flex;
  min-height: 500px;
}

.m_left {
  width: 200px;
  background: #f5f5f5;
  border-right: 1px solid #ddd;
}

.m_right {
  flex: 1;
  padding: 20px;
  background: #fff;
}

@media (max-width: 768px) {
  .m_content {
    flex-direction: column;
  }
  
  .m_left {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #ddd;
  }
}
</style>